<template>
    <div class="">
        <div class="mar_t20 ba_f outmain">
            <div class="shuju_title">
                <div class="shuju_title_text">
                    <span>门店账户</span>
                </div>
            </div>
            <div class="main-icon flex t_l mar_t20">
                <div class="flex-1 t_l pad_20">
                    <div class="flex-bet flex-y-top">
                        <div>
                            <p class="title6 fon_14">可提现余额（元）</p>
                            <p class="fon_30 title35 lh16 pad_tb_20">{{zhData.money || 0}}</p>
                        </div>
                        <div class="toolTip">
                            <el-tooltip effect="dark" placement="top">
                                <div slot="content">可提现余额:指门店可提现的金额</div>
                                <button type="button"
                                        class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                    <span><i class="el-icon-question"></i></span>
                                </button>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
                <div class="flex-1 t_l pad_20">
                    <div class="flex-bet flex-y-top">
                        <div>
                            <p class="title6 fon_14">待结算金额（元）</p>
                            <p class="fon_30 title35 lh16 pad_tb_20">{{zhData.waitMoney || 0}}</p>
                        </div>
                        <div class="toolTip">
                            <el-tooltip effect="dark" placement="top">
                                <div slot="content">待结算金额:指门店订单待完成的订单总额</div>
                                <button type="button"
                                        class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                    <span><i class="el-icon-question"></i></span>
                                </button>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
                <div class="flex-1 t_l pad_20">
                    <div class="flex-bet flex-y-top">
                        <div>
                            <p class="title6 fon_14">门店总金额（元）</p>
                            <p class="fon_30 title35 lh16 pad_tb_20">{{zhData.allMoney || 0}}</p>
                        </div>
                        <div class="toolTip">
                            <el-tooltip effect="dark" placement="top">
                                <div slot="content">门店总金额=可提现金额+待结算金额</div>
                                <button type="button"
                                        class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                    <span><i class="el-icon-question"></i></span>
                                </button>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
                <div class="flex-1 t_l pad_20">
                    <div class="flex-bet flex-y-top">
                        <div>
                            <p class="title6 fon_14">已提现金额（元）</p>
                            <p class="fon_30 title35 lh16 pad_tb_20">{{zhData.financeMoney || 0}}</p>
                        </div>
                        <div class="toolTip">
                            <el-tooltip effect="dark" placement="top">
                                <div slot="content">已提现金额（元）:指门店已提现到账的金额</div>
                                <button type="button"
                                        class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                    <span><i class="el-icon-question"></i></span>
                                </button>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
                <div class="flex-1 t_l pad_20">
                    <div class="flex-bet flex-y-top">
                        <div>
                            <p class="title6 fon_14">累计收入（元）</p>
                            <p class="fon_30 title35 lh16 pad_tb_20">{{zhData.cumulative || 0}}</p>
                        </div>
                        <div class="toolTip">
                            <el-tooltip effect="dark" placement="top">
                                <div slot="content">累计收入=门店总金额+已提现金额</div>
                                <button type="button"
                                        class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                    <span><i class="el-icon-question"></i></span>
                                </button>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="t_r mar_t20">
            <div class="fon_12 mar_r10 color_9">
                <span class="fon_14 color_3">时间筛选：</span>
                <el-date-picker
                        v-model="form.time"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        format="yyyy年MM月dd日"
                        class="mar_l10"
                        @change="changeTime">
                </el-date-picker>
            </div>
        </div>
        <div class="mar_t10 ba_f outmain">
            <div class="shuju_title">
                <div class="shuju_title_text">
                    <span>实时概况</span>
                </div>
            </div>
            <div class="flex-bet">
                <div class="bflex-5">
                    <div class="pad_20">
                        <p class="title6 fon_14 wei">营业额</p>
                        <p class="fon_30 title35 lh16 pad_tb_20">{{jeData.allMoney || 0}}</p>
                    </div>
                    <div id="shujuEch" style="height: 360px;width: 100%"></div>
                </div>
                <div class="bflex-5 pad_t_30">
                    <div class="flex pad_20">
                        <div class="flex-g-1 flex">
                            <div class="mar_r20">
                                <div class="tongji_icon bor_rad50 iconfont iconfangkeshu flex-center color_f" style="background:#7BDCFF"></div>
                            </div>
                            <div>
                                <p class="title6 fon_14 wei">用户实付金额</p>
                                <p class="fon_30 title35 lh16 pad_tb_20">{{jeData.payMoney || 0}}</p>
                                <p class="fon_12 title6 lh25" style="color: #fff">昨日全天：0</p>
                            </div>
                        </div>
                        <div class="flex-g-1 flex">
                            <div class="mar_r20">
                                <div class="tongji_icon bor_rad50 iconfont iconliulan flex-center color_f" style="background:#FFE934"></div>
                            </div>
                            <div>
                                <p class="title6 fon_14 wei">预计收入</p>
                                <p class="fon_30 title35 lh16 pad_tb_20">{{jeData.cumulative || 0}}</p>
                                <p class="fon_12 title6 lh25" style="color: #fff">昨日全天：0</p>
                            </div>
                        </div>
                    </div>
                    <div class="flex pad_20">
                        <div class="flex-g-1 flex">
                            <div class="mar_r20">
                                <div class="tongji_icon iconfont iconzhifurenshu bor_rad50 flex-center color_f" style="background:#009AFE"></div>
                            </div>
                            <div>
                                <p class="title6 fon_14 wei">付款人数</p>
                                <p class="fon_30 title35 lh16 pad_tb_20">{{jeData.payNum || 0}}</p>
                                <p class="fon_12 title6 lh25" style="color: #fff">昨日全天：0</p>
                            </div>
                        </div>
                        <div class="flex-g-1 flex">
                            <div class="mar_r20">
                                <div class="tongji_icon bor_rad50 iconfont iconzhifudingdanshu flex-center color_f" style="background:#11CD6E"></div>
                            </div>
                            <div>
                                <p class="title6 fon_14 wei">有效订单数</p>
                                <p class="fon_30 title35 lh16 pad_tb_20">{{jeData.orderNum || 0}}</p>
                                <p class="fon_12 title6 lh25" style="color: #fff">昨日全天：0</p>
                            </div>
                        </div>
                    </div>
                    <div class="flex pad_20 wid">
                        <div class="flex-g-1 flex wid50">
                            <div class="mar_r20">
                                <div class="tongji_icon bor_rad50 iconfont icontuikuan flex-center color_f" style="background:#F85959"></div>
                            </div>
                            <div>
                                <p class="title6 fon_14 wei">取消/退款订单</p>
                                <p class="fon_30 title35 lh16 pad_tb_20">{{jeData.refundCount || 0}}</p>
                                <p class="fon_12 title6 lh25">取消/退款金额：{{jeData.refundMoney || 0}}</p>
                            </div>
                        </div>
                        <div class="flex-g-1 flex wid50">
                            <div class="mar_r20">
                                <div class="tongji_icon bor_rad50 iconfont iconkedanjia flex-center color_f" style="background:#FEB822"></div>
                            </div>
                            <div>
                                <p class="title6 fon_14 wei">其他订单</p>
                                <p class="fon_30 title35 lh16 pad_tb_20">{{jeData.otherNum || 0}}</p>
                                <p class="fon_12 title6 lh25" style="color: #fff">其他营收金额：0</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mar_t20 ba_f outmain">
            <div class="shuju_title">
                <div class="shuju_title_text">
                    <span>整体看板</span>
                </div>
            </div>
            <div class="main-icon flex t_l mar_t20">
                <div class="flex-1 t_l pad_20 bortColor">
                    <div class="flex-bet flex-y-top">
                        <div>
                            <p class="title6 fon_14">用户实付金额</p>
                            <p class="fon_30 title35 lh16 pad_tb_20">{{jeData.payMoney || 0}}</p>
                        </div>
                        <div class="toolTip">
                            <el-tooltip effect="dark" placement="top">
                                <div slot="content">统计周期内有效订单的总计金额，包含商品销售额+包装销售额+配送费+活动补贴</div>
                                <button type="button"
                                        class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                    <span><i class="el-icon-question"></i></span>
                                </button>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
                <div class="flex-1 t_l pad_20 bortColor">
                    <div class="flex-bet flex-y-top">
                        <div>
                            <p class="title6 fon_14">有效订单数</p>
                            <p class="fon_30 title35 lh16 pad_tb_20">{{jeData.orderNum || 0}}</p>
                        </div>
                        <div class="toolTip">
                            <el-tooltip effect="dark" placement="top">
                                <div slot="content">统计时间内，未取消且未发生退款的订单量</div>
                                <button type="button"
                                        class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                    <span><i class="el-icon-question"></i></span>
                                </button>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
                <div class="flex-1 t_l pad_20 bortColor">
                    <div class="flex-bet flex-y-top">
                        <div>
                            <p class="title6 fon_14">付款人数</p>
                            <p class="fon_30 title35 lh16 pad_tb_20">{{jeData.payNum || 0}}</p>
                        </div>
                        <div class="toolTip">
                            <el-tooltip effect="dark" placement="top">
                                <div slot="content">统计周期内，付款成功的用户数，一人多次结算记为一人</div>
                                <button type="button"
                                        class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                    <span><i class="el-icon-question"></i></span>
                                </button>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
                <div class="flex-1 t_l pad_20 bortColor">
                    <div class="flex-bet flex-y-top">
                        <div>
                            <p class="title6 fon_14">客单价</p>
                            <p class="fon_30 title35 lh16 pad_tb_20">{{jeData.price || 0}}</p>
                        </div>
                        <div class="toolTip">
                            <el-tooltip effect="dark" placement="top">
                                <div slot="content">客单价</div>
                                <button type="button"
                                        class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                    <span><i class="el-icon-question"></i></span>
                                </button>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
            </div>
            <div id="zhentiEch" style="height: 360px;" class="mar_t20"></div>
        </div>
        <div class="mar_t20 ba_f outmain pad_20 ">
            <div class="shuju_title">
                <div class="shuju_title_text">
                    <span>浏览概况</span>
                </div>
            </div>
            <div class="flex-bet">
                <div class="bflex-7 outmain" style="height: 390px;">
                    <div id="zhentiEch3" style="height:360px"></div>
                </div>
                <div class="bflex-3">
                    <div class="bortColor flex-bet pad_20 flex-y-top">
                        <div>
                            <p class="title6 fon_14">浏览量(pv)</p>
                            <p class="fon_30 title35 lh16 pad_tb_20">{{jeData.visitCount || 0}}</p>
                            <div class="flex">
                                <p class="fon_12 title6 lh25">全部 {{jeData.visitTotal || 0}}</p>
                            </div>
                        </div>
                        <div class="toolTip">
                            <el-tooltip effect="dark" placement="top">
                                <div slot="content">浏览量</div>
                                <button type="button"
                                        class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                    <span><i class="el-icon-question"></i></span>
                                </button>
                            </el-tooltip>
                        </div>
                    </div>
                    <div class="bortColor flex-bet pad_20 flex-y-top mar_t20">
                        <div>
                            <p class="title6 fon_14">访客数(uv)</p>
                            <p class="fon_30 title35 lh16 pad_tb_20">{{jeData.userCount || 0}}</p>
                            <div class="flex">
                                <p class="fon_12 title6 lh25">全部 {{jeData.userTotal || 0}}</p>
                            </div>
                        </div>
                        <div class="toolTip">
                            <el-tooltip effect="dark" placement="top">
                                <div slot="content">访客数</div>
                                <button type="button"
                                        class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                    <span><i class="el-icon-question"></i></span>
                                </button>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mar_t20 pad_20 ba_f outmain">
            <div class="shuju_title">
                <div class="shuju_title_text">
                    <span>商品看板</span>
                </div>
            </div>
            <div class="mar_t20 flex-bet">
                <div class="flex-g-1" style="height: 520px;">
                    <div class="flex t_l">
                        <div class="title35">销量TOP10商品</div>
                        <div class="toolTip mar_l10">
                            <el-tooltip effect="dark" placement="top">
                                <div slot="content">统计周期内，门店销量排行前10的商品</div>
                                <button type="button"
                                        class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                    <span><i class="el-icon-question"></i></span>
                                </button>
                            </el-tooltip>
                        </div>
                    </div>
                    <div class="mar_t10 shuju_table">
                        <el-table
                                :data="tableData"
                                stripe
                                style="width: 100%">
                            <el-table-column
                                    type="index"
                                    label="排名"
                            >
                            </el-table-column>
                            >
                            <el-table-column
                                    prop="name"
                                    label="商品名称"
                            >
                            </el-table-column>
                            >
                            <el-table-column
                                    prop="num"
                                    label="商品销量数">
                            </el-table-column>
                            <el-table-column
                                    prop="money"
                                    label="销售额">
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="flex-g-1 mar_l20" style="height: 520px;">
                    <div class="flex t_l">
                        <div class="title35">支付TOP10商品</div>
                        <div class="toolTip mar_l10">
                            <el-tooltip effect="dark" placement="top">
                                <div slot="content">统计周期内，门店支付排行前10的商品</div>
                                <button type="button"
                                        class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                    <span><i class="el-icon-question"></i></span>
                                </button>
                            </el-tooltip>
                        </div>
                    </div>
                    <div class="mar_t10 shuju_table">
                        <el-table
                                :data="tableData"
                                stripe
                                style="width: 100%"
                        >
                            <el-table-column
                                    type="index"
                                    label="排名"
                            >
                            </el-table-column>
                            >
                            <el-table-column
                                    prop="name"
                                    label="商品名称"
                            >
                            </el-table-column>
                            >
                            <el-table-column
                                    prop="money"
                                    label="销售额">
                            </el-table-column>
                            <el-table-column
                                    prop="num"
                                    label="商品销量">
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import echarts from "echarts";
    import {getRecordData, realRecord} from "@/api/statistics";
    import {changeDate} from "@/utils/index";
    import {mapState} from 'vuex'
    export default {
        mounted() {
            this.bus.$emit('loading', true);
            this.init();
        },
        data() {
            return {
                zhData:{},
                jeData:{},
                jyData:{},
                form: {
                    shopValue: '',
                    timeType: '1',
                    time: [new Date(),new Date()],
                    Mtime: '',
                },
                options: [{
                    value: '1',
                    label: '全部'
                }],
                tableData: [],
                tableData2: [],
                echarts1_option: {
                    color: ['#4284ED', '#42CCF0'],
                    tooltip: {
                        trigger: 'axis',
                    },
                    // tooltip: {
                    //     trigger: 'axis',
                    //     formatter: (params)=> {
                    //         // console.log(params,666)
                    //         var time ='时间：'+ (Number(params[0].name)-1)+':00' +'~'+ Number(params[0].name)+':00';
                    //         for(var i=0 ; i < params.length;i++){
                    //             var numbers = '</br>' +params[i].seriesName+ '：'+params[i].value;
                    //             time+=numbers
                    //         }
                    //         return time
                    //     }
                    // },
                    legend: {
                        data: ['营业额']
                    },
                    grid: {
                        left: '3%',
                        right: '5%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        // 去除坐标轴上的刻度线
                        axisTick: {
                            show: false,
                            lineStyle: {
                                color: '#ccc',
                                type: 'dashed'
                            }
                        },
                        // x轴的字体样式
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#333',
                                fontSize: '12'
                            }
                        },
                        // x轴的颜色和宽度
                        axisLine: {
                            lineStyle: {
                                color: '#4ECB73',
                                width: 2,   //这里是坐标轴的宽度,可以去掉
                            }
                        },
                        data: [],
                    },
                    yAxis: {
                        type: 'value',
                        axisTick: {       //y轴刻度线
                            "show": false
                        },
                        axisLine: {
                            "show": false,
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#333',
                                fontSize: '12'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dotted',
                                color: '#DDDDDD',
                            },
                            show: true
                        }
                    },
                    series: [
                        {
                            name: '营业额',
                            type: 'bar',
                            data: []
                        }
                    ],
                },
                echarts2_option: {
                    color: ['#4284ED', '#42CCF0','#1890FF', '#2FC25B','#4284ED'],
                    tooltip: {
                        trigger: 'axis',
                    },
                    legend: {
                        // data: ['支付金额', '支付订单数', '支付人数', '客单价', '支付会员数']
                        data: ['用户实付金额', '有效订单数', '付款人数', '客单价']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        // 去除坐标轴上的刻度线
                        axisTick: {
                            show: false,
                            lineStyle: {
                                color: '#ccc',
                                type: 'dashed'
                            }
                        },
                        // x轴的字体样式
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#333',
                                fontSize: '12'
                            }
                        },
                        // x轴的颜色和宽度
                        axisLine: {
                            lineStyle: {
                                color: '#4ECB73',
                                width: 2,   //这里是坐标轴的宽度,可以去掉
                            }
                        },
                        data: []
                    },
                    yAxis: {
                        type: 'value',
                        axisTick: {       //y轴刻度线
                            "show": false
                        },
                        axisLine: {
                            "show": false,
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#333',
                                fontSize: '12'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dotted',
                                color: '#DDDDDD',
                            },
                            show: true
                        }
                    },
                    series: [
                        {
                            name: '用户实付金额',
                            type: 'line',
                            stack: '总量',
                            smooth: true,
                            data: []
                        },
                        {
                            name: '有效订单数',
                            type: 'line',
                            stack: '总量',
                            smooth: true,
                            data: []
                        },
                        {
                            name: '付款人数',
                            type: 'line',
                            stack: '总量',
                            smooth: true,
                            data: []
                        },
                        {
                            name: '客单价',
                            type: 'line',
                            stack: '总量',
                            smooth: true,
                            data: []
                        },
                        {
                            name: '支付会员数',
                            type: 'line',
                            stack: '总量',
                            smooth: true,
                            data: []
                        }
                    ]
                },
                echarts3_option: {
                    color: ['#4284ED', '#42CCF0'],
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['浏览量', '访客数']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        // 去除坐标轴上的刻度线
                        axisTick: {
                            show: false,
                            lineStyle: {
                                color: '#ccc',
                                type: 'dashed'
                            }
                        },
                        // x轴的字体样式
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#333',
                                fontSize: '12'
                            }
                        },
                        // x轴的颜色和宽度
                        axisLine: {
                            lineStyle: {
                                color: '#4ECB73',
                                width: 2,   //这里是坐标轴的宽度,可以去掉
                            }
                        },
                        data: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
                    },
                    yAxis: {
                        type: 'value',
                        axisTick: {       //y轴刻度线
                            "show": false
                        },
                        axisLine: {
                            "show": false,
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#333',
                                fontSize: '12'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dotted',
                                color: '#DDDDDD',
                            },
                            show: true
                        }
                    },
                    series: [
                        {
                            name: '浏览量',
                            type: 'line',
                            stack: '总量',
                            smooth: true,
                            data: [10, 32, 25, 15, 40, 15, 20, 10, 22, 30, 25,]
                        },
                        {
                            name: '访客数',
                            type: 'line',
                            stack: '总量',
                            smooth: true,
                            data: [80, 22, 20, 10, 25, 35, 20, 10, 64, 20, 90,]
                        }
                    ]
                },
            }
        },
        computed:{
            ...mapState(['storeId'])
        },
        methods: {
            init() {
                this.recordData()
                this.realRecord()
            },
            async recordData() {
                const {data} = await getRecordData({storeId: this.storeId,});
                if (data) {
                    this.zhData=data;
                    this.bus.$emit('loading', false)
                }
            },
            async realRecord() {
                let startTime = '';
                let endTime = '';
                if(this.form.time){
                    startTime  = changeDate(this.form.time[0]);
                    endTime = changeDate(this.form.time[1]);
                }
                var params = {
                    startTime,
                    endTime,
                    storeId: this.storeId,
                }
                const {data} = await realRecord(params);
                if (data) {
                    this.jeData = data
                    this.tableData = data.moneyTop
                    this.tableData2 = data.payTop

                    this.echarts1_option.series[0].data = data.moneyArr.map(item => item.money);
                    this.echarts1_option.xAxis.data = data.moneyArr.map(item => item.hours);
                    this.shujuEch()

                    this.echarts2_option.series[0].data = data.payMoneyArr.map(item => item.money);
                    this.echarts2_option.series[1].data = data.orderNumArr.map(item => item.money);
                    this.echarts2_option.series[2].data = data.payNumArr.map(item => item.money);
                    this.echarts2_option.series[3].data = data.priceArr.map(item => item.money);
                    this.echarts2_option.xAxis.data = data.payMoneyArr.map(item => item.hours);
                    this.zhentiEch()

                    this.echarts3_option.series[0].data = data.visitArr.map(item => item.money);
                    this.echarts3_option.series[1].data = data.userArr.map(item => item.money);
                    this.echarts3_option.xAxis.data = data.visitArr.map(item => item.hours);
                    this.zhentiEch3()
                }
            },
            shujuEch() {
                let myChart = echarts.init(document.getElementById('shujuEch'))
                console.log(1)
                myChart.setOption(this.echarts1_option, true)
            },
            zhentiEch() {
                let myChart = echarts.init(document.getElementById('zhentiEch'))
                myChart.setOption(this.echarts2_option, true)
            },
            zhentiEch3() {
                let myChart = echarts.init(document.getElementById('zhentiEch3'))
                myChart.setOption(this.echarts3_option, true)
            },
            changeTime(){
                this.realRecord()
            },
        }
    }
</script>
<style lang="scss" scoped>
    .title6 {
        color: #666;
        font-size: 14px;
    }

    .title35 {
        color: #353535;
    }

    .tongji_icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
</style>
